-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
364e91a
commit c73e0c9
Showing
40 changed files
with
1,017 additions
and
1,239 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,44 @@ | ||
| import React from "react"; | ||
| import { Is, BoxProps, BoxComponent } from "./types/box-types"; | ||
| import enhanceProps from "./enhance-props"; | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import {Is, BoxProps, BoxComponent} from './types/box-types' | ||
| import {propTypes} from './enhancers' | ||
| import enhanceProps from './enhance-props' | ||
|
|
||
| type Options<T extends Is> = { | ||
| is: T; | ||
| }; | ||
| is: T | ||
| } | ||
|
|
||
| function createComponent<T extends Is>({ is: defaultIs }: Options<T>) { | ||
| const Component: BoxComponent<T> = ({ is = defaultIs, innerRef, children, ...props }: BoxProps<T>) => { | ||
| // Convert the CSS props to class names (and inject the styles) | ||
| const { className, enhancedProps: parsedProps } = enhanceProps(props); | ||
| const {className, enhancedProps: parsedProps} = enhanceProps(props) | ||
|
|
||
| parsedProps.className = className; | ||
| parsedProps.className = className | ||
|
|
||
| if (innerRef) { | ||
| parsedProps.ref = innerRef; | ||
| parsedProps.ref = innerRef | ||
| } | ||
|
|
||
| return React.createElement(is, parsedProps, children); | ||
| }; | ||
| (Component as any).displayName = "Box"; | ||
| // (Component as any).propTypes = { | ||
| // ...propTypes, | ||
| // innerRef: PropTypes.func, | ||
| // is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) | ||
| // }; | ||
| (Component as any).defaultProps = { | ||
| return React.createElement(is, parsedProps, children) | ||
| } | ||
|
|
||
| ;(Component as any).displayName = 'Box' | ||
|
|
||
| ;(Component as any).propTypes = { | ||
| ...propTypes, | ||
| innerRef: PropTypes.func, | ||
| is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) | ||
| } | ||
|
|
||
| ;(Component as any).defaultProps = { | ||
| innerRef: null, | ||
| is: "div", | ||
| boxSizing: "border-box" | ||
| }; | ||
| is: 'div', | ||
| boxSizing: 'border-box' | ||
| } | ||
|
|
||
| return Component; | ||
| return Component | ||
| } | ||
|
|
||
| const Box = createComponent({ is: "div" }); | ||
| const Box = createComponent({ is: 'div' }) | ||
|
|
||
| export default Box; | ||
| export default Box |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,56 @@ | ||
| import * as cache from "./cache"; | ||
| import { propEnhancers, propValueTypes } from "./enhancers"; | ||
| import expandAliases from "./expand-aliases"; | ||
| import * as styles from "./styles"; | ||
| import { Without } from "./types/box-types"; | ||
| import { EnhancerProps } from "./types/enhancers"; | ||
| import facepaint from "facepaint"; | ||
| import valueToString from "./value-to-string"; | ||
| import {propEnhancers} from './enhancers' | ||
| import expandAliases from './expand-aliases' | ||
| import * as cache from './cache' | ||
| import * as styles from './styles' | ||
| import {Without} from './types/box-types' | ||
| import {EnhancerProps} from './types/enhancers' | ||
|
|
||
| type PreservedProps = Without<React.ComponentProps<any>, keyof EnhancerProps>; | ||
| type PreservedProps = Without<React.ComponentProps<any>, keyof EnhancerProps> | ||
|
|
||
| interface EnhancedPropsResult { | ||
| className: string; | ||
| enhancedProps: PreservedProps; | ||
| className: string | ||
| enhancedProps: PreservedProps | ||
| } | ||
|
|
||
| const mq = facepaint(["@media(max-width: 1121px)", "@media(max-width: 921px)", "@media(max-width: 421px)"]); | ||
|
|
||
| /** | ||
| * Converts the CSS props to class names and inserts the styles. | ||
| */ | ||
| export default function enhanceProps(rawProps: EnhancerProps & React.ComponentPropsWithoutRef<any>): EnhancedPropsResult { | ||
| const propsMap = expandAliases(rawProps); | ||
|
|
||
| const preservedProps: PreservedProps = {}; | ||
| let className = rawProps.className || ""; | ||
| const propsMap = expandAliases(rawProps) | ||
| const preservedProps: PreservedProps = {} | ||
| let className = rawProps.className || '' | ||
|
|
||
| for (const [propName, propValue] of propsMap) { | ||
| const cachedClassName = cache.get(propName, propValue); | ||
| const cachedClassName = cache.get(propName, propValue) | ||
| if (cachedClassName) { | ||
| className = `${className} ${cachedClassName}`; | ||
| continue; | ||
| } | ||
|
|
||
| if (Array.isArray(propValue)) { | ||
| const mqProps = mq({ [propName]: propValue })[0]; | ||
| const propertyInfo = propValueTypes[propName]; | ||
| const sharedClassName = "♱" + propertyInfo.className + "_" + propValue.join("-"); | ||
| let addedClassName = false; | ||
|
|
||
| Object.keys(mqProps).forEach(key => { | ||
| if (typeof mqProps[key] !== "object") { | ||
| const enhancer = propEnhancers[propName]; | ||
| if (enhancer && (propValue === null || propValue === undefined || propValue === false)) { | ||
| return; | ||
| } else if (!enhancer) { | ||
| // Pass through native props. e.g: disabled, value, type | ||
| preservedProps[propName] = propValue; | ||
| return; | ||
| } | ||
| const newCss = enhancer(mqProps[key]); | ||
| // Allow enhancers to return null for invalid values | ||
| if (newCss) { | ||
| styles.add(newCss.styles); | ||
| cache.set(propName, propValue, `${sharedClassName} ${newCss.className}`); | ||
| className = `${className} ${sharedClassName} ${newCss.className}`; | ||
| addedClassName = true; | ||
| } | ||
| } else { | ||
| const ruleString = `${propertyInfo.cssName}:${valueToString(Object.values(mqProps[key])[0])}`; | ||
| const newCss = { | ||
| className: sharedClassName, | ||
| styles: ` | ||
| ${key} { | ||
| .${sharedClassName} { ${ruleString} } | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| if (!addedClassName) { | ||
| className = `${className} ${sharedClassName}`; | ||
| } | ||
|
|
||
| styles.add(newCss.styles); | ||
| } | ||
| }); | ||
|
|
||
| continue; | ||
| className = `${className} ${cachedClassName}` | ||
| continue | ||
| } | ||
|
|
||
| const enhancer = propEnhancers[propName]; | ||
| const enhancer = propEnhancers[propName] | ||
| // Skip false boolean enhancers. e.g: `clearfix={false}` | ||
| // Also allows omitting props via overriding with `null` (i.e: neutralising props) | ||
| if (enhancer && (propValue === null || propValue === undefined || propValue === false)) { | ||
| continue; | ||
| if ( | ||
| enhancer && | ||
| (propValue === null || propValue === undefined || propValue === false) | ||
| ) { | ||
| continue | ||
| } else if (!enhancer) { | ||
| // Pass through native props. e.g: disabled, value, type | ||
| preservedProps[propName] = propValue; | ||
| continue; | ||
| preservedProps[propName] = propValue | ||
| continue | ||
| } | ||
|
|
||
| const newCss = enhancer(propValue); | ||
| const newCss = enhancer(propValue) | ||
| // Allow enhancers to return null for invalid values | ||
| if (newCss) { | ||
| styles.add(newCss.styles); | ||
| cache.set(propName, propValue, newCss.className); | ||
| className = `${className} ${newCss.className}`; | ||
| styles.add(newCss.styles) | ||
| cache.set(propName, propValue, newCss.className) | ||
| className = `${className} ${newCss.className}` | ||
| } | ||
| } | ||
|
|
||
| className = className.trim(); | ||
| className = className.trim() | ||
|
|
||
| return { className, enhancedProps: preservedProps }; | ||
| return {className, enhancedProps: preservedProps} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.