old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README | LICENSE | CC-LICENSE

List.js (1005B)

      1 // @flow
      2 import React from 'react';
      3 import styled, {css, type StyledComponent} from 'styled-components';
      4 import {Text} from './';
      5 import {colors} from '../Theme/colors';
      6 
      7 type Props = {|
      8   as?: 'ol' | 'li',
      9   children: React$Node,
     10 |};
     11 
     12 const ListBase: StyledComponent<Props, {}, {}> = styled.ul`
     13   padding: 0;
     14 
     15   ${props =>
     16     props.as === 'li'
     17       ? css`
     18           position: relative;
     19           list-style: none;
     20           padding-left: 20px;
     21           margin-bottom: 10px;
     22           &:before {
     23             display: inline-block;
     24             content: '- ';
     25             position: absolute;
     26             width: 20px;
     27             color: ${colors.orange};
     28             left: 0;
     29           }
     30         `
     31       : css``}
     32 `;
     33 
     34 const List = (props: Props) => {
     35   const {as, children, ...rest} = props;
     36   return as && as === 'li' ? (
     37     <ListBase as={as} {...rest}>
     38       <Text>{children}</Text>
     39     </ListBase>
     40   ) : (
     41     <ListBase as={as} {...rest}>
     42       {children}
     43     </ListBase>
     44   );
     45 };
     46 
     47 export default List;