feat: Add components support css-in-js

myxvisual · Aug 8, 2017 · 0fdece2 · 0fdece2
1 parent 2a0f2b3
commit 0fdece2
Show file tree

Hide file tree

Showing 12 changed files with 371 additions and 364 deletions.
diff --git a/src/AppBarButton/index.tsx b/src/AppBarButton/index.tsx
@@ -60,22 +60,22 @@ export class AppBarButtonButton extends React.Component<AppBarButtonButtonProps>
       className: theme.classNames(className, styles.root.className)
     };
 
-    const getNormalRender = (props?: any) => (
-      <div {...props}>
-        <Icon style={inlineStyles.icon}>
-          {icon}
-        </Icon>
-        {labelPosition !== "collapsed" && <p {...styles.label}>
-          {label}
-        </p>}
-      </div>
-    );
-
-    return theme.useInlineStyle ? (
-      <PseudoClasses {...rootProps}>
-        {getNormalRender()}
+    return (
+      <PseudoClasses
+        {...attributes}
+        style={styles.root.style}
+        className={theme.classNames(className, styles.root.className)}
+      >
+        <div>
+          <Icon style={inlineStyles.icon}>
+            {icon}
+          </Icon>
+          {labelPosition !== "collapsed" && <p {...styles.label}>
+            {label}
+          </p>}
+        </div>
       </PseudoClasses>
-    ) : getNormalRender(rootProps);
+    );
   }
 }
 

diff --git a/src/AutoSuggestBox/index.tsx b/src/AutoSuggestBox/index.tsx
@@ -223,33 +223,21 @@ export class AutoSuggestBox extends React.Component<AutoSuggestBoxProps, AutoSug
       className: "autosuggest-box"
     });
 
-    const rootProps = {
-      ...attributes,
-      style: styles.root.style,
-      className: theme.classNames(className, styles.root.className)
-    };
-    const iconProps = {
-      style: inlineStyles.icon,
-      onClick: this.handleButtonAction
-    };
-
-    const getIcon = (props?: any) => (
-      <Icon {...props}>
-        {typing ? "CancelLegacy" : "Search"}
-      </Icon>
-    );
-
     return (
       <TextBox
-        {...rootProps}
+        {...attributes}
+        style={inlineStyles.root}
+        className={theme.classNames(className, styles.root.className)}
         ref={textBox => this.textBox = textBox}
         onClick={this.showListSource}
         onKeyDown={this.handleInputKeyDown}
-        rightNode={theme.useInlineStyle ? (
-          <PseudoClasses {...iconProps}>
-            {getIcon()}
+        rightNode={
+          <PseudoClasses style={inlineStyles.icon} onClick={this.handleButtonAction}>
+            <Icon>
+              {typing ? "CancelLegacy" : "Search"}
+            </Icon>
           </PseudoClasses>
-        ) : getIcon(iconProps)}
+        }
         background={background}
         onChange={this.handleChange}
       >

diff --git a/src/Button/index.tsx b/src/Button/index.tsx
@@ -78,7 +78,7 @@ export class Button extends React.Component<ButtonProps> {
     } = this.props;
     const { theme } = this.context;
 
-    const rootAttributes = theme.prepareStyle({
+    const buttonStyles = theme.prepareStyle({
       className: "button-root",
       style: {
         display: "inline-block",
@@ -106,7 +106,7 @@ export class Button extends React.Component<ButtonProps> {
       extendsClassName: className
     });
 
-    const iconAttributes = theme.prepareStyle({
+    const iconStyles = theme.prepareStyle({
       className: "button-icon",
       style: {
         padding: "0 4px",
@@ -115,46 +115,36 @@ export class Button extends React.Component<ButtonProps> {
       }
     });
 
-    const rootProps = {
-      ...attributes,
-      disabled,
-      ...rootAttributes
-    };
-
-    let normalRender = (
-      icon ? (iconPosition === "right" ? (
-        <button {...(theme.useInlineStyle ? void 0 : rootProps)}>
-          <span style={labelStyle}>
-            {children}
-          </span>
-          <Icon {...iconAttributes}>
-            {icon}
-          </Icon>
-        </button>
-      ) : (
-        <button {...(theme.useInlineStyle ? void 0 : rootProps)}>
-          <Icon {...iconAttributes}>
-            {icon}
-          </Icon>
-          <span style={labelStyle}>
-            {children}
-          </span>
-        </button>
-      )) : (
-        <button {...(theme.useInlineStyle ? void 0 : rootProps)}>
-          {children}
-        </button>
-      )
+    const normalRender = (
+      <PseudoClasses {...attributes} disabled={disabled} {...buttonStyles}>
+        {(
+          icon ? (iconPosition === "right" ? (
+            <button>
+              <span style={labelStyle}>
+                {children}
+              </span>
+              <Icon {...iconStyles}>
+                {icon}
+              </Icon>
+            </button>
+          ) : (
+            <button>
+              <Icon {...iconStyles}>
+                {icon}
+              </Icon>
+              <span style={labelStyle}>
+                {children}
+              </span>
+            </button>
+          )) : (
+            <button>
+              {children}
+            </button>
+          )
+        )}
+      </PseudoClasses>
     );
 
-    if (theme.useInlineStyle) {
-      normalRender = (
-        <PseudoClasses {...(theme.useInlineStyle ? rootProps : void 0)}>
-          {normalRender}
-        </PseudoClasses>
-      );
-    }
-
     return tooltip ? (
       <Tooltip contentNode={tooltip}>
         {normalRender}

diff --git a/src/DatePicker/index.tsx b/src/DatePicker/index.tsx
@@ -65,7 +65,7 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
   };
 
   addBlurEvent = new AddBlurEvent();
-  pseudoClasses: PseudoClasses;
+  rootElm: HTMLDivElement = null;
 
   prevDate: Date = this.props.defaultDate;
 
@@ -94,7 +94,7 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
 
     this.addBlurEvent.setConfig({
       addListener: this.state.showPicker,
-      clickExcludeElm: this.pseudoClasses.rootElm,
+      clickExcludeElm: this.rootElm,
       blurCallback: () => {
         this.setState({
           showPicker: false
@@ -181,103 +181,95 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
     this.dateIndex = dateArray.indexOf(currDateNumb);
     this.yearIndex = yearArray.indexOf(currYear);
 
-    const normalRender = (
-      <div
-        {...attributes}
-        style={styles.root.style}
-        className={theme.classNames(styles.root.className, className)}
-        ref={rootElm => {
-          if (!theme.useInlineStyle) {
-            this.pseudoClasses = { rootElm } as any;
-          }
-        }}
-      >
-        <div {...styles.pickerModal}>
-          <div {...styles.listViews}>
-            <ListView
-              ref={monthListView => this.monthListView = monthListView}
-              style={inlineStyles.listView}
-              listItemStyle={styles.listItem}
-              defaultFocusListIndex={currMonth}
-              listSource={monthArray}
-              onChooseItem={month => {
-                this.setDate(void 0, month, void 0);
-              }}
-            />
-            <ListView
-              ref={dateListView => this.dateListView = dateListView}
-              style={inlineStyles.listView}
-              listItemStyle={styles.listItem}
-              defaultFocusListIndex={this.dateIndex}
-              listSource={dateArray}
-              onChooseItem={dayIndex => {
-                this.setDate(dayIndex + 1, void 0, void 0);
-              }}
-            />
-            <ListView
-              ref={yearListView => this.yearListView = yearListView}
-              style={inlineStyles.listView}
-              listItemStyle={styles.listItem}
-              defaultFocusListIndex={this.yearIndex}
-              listSource={yearArray}
-              onChooseItem={yearIndex => {
-                this.setDate(void 0, void 0, minYear + yearIndex);
-              }}
-            />
-          </div>
-          <div style={{ boxShadow: `inset 0 0 0 1px ${theme.baseLow}`, zIndex: theme.zIndex.flyout + 1 }}>
-            <IconButton
-              style={inlineStyles.iconButton}
-              size={pickerItemHeight}
-              onClick={() => {
-                onChangeDate(currDate);
-                this.setState({ showPicker: false });
-              }}
-            >
-              AcceptLegacy
-            </IconButton>
-            <IconButton
-              style={inlineStyles.iconButton}
-              size={pickerItemHeight}
-              onClick={() => {
-                this.setState({ currDate: this.prevDate, showPicker: false });
-              }}
-            >
-              ClearLegacy
-            </IconButton>
-          </div>
-        </div>
-        <span
-          {...styles.button}
-          onClick={this.toggleShowPicker}
-        >
-          {monthList[currMonth]}
-        </span>
-        {separator}
-        <span
-          {...styles.button}
-          onClick={this.toggleShowPicker}
-        >
-          {currDateNumb}
-        </span>
-        {separator}
-        <span
-          {...styles.button}
-          onClick={this.toggleShowPicker}
-        >
-          {currYear}
-        </span>
-      </div>
-    );
-    return theme.useInlineStyle ? (
+    return (
       <PseudoClasses
         {...attributes as any}
-        {...inlineStyles.root}
-        ref={(pseudoClasses: PseudoClasses) => this.pseudoClasses = pseudoClasses}
+        {...styles.root}
       >
-        {normalRender}
+        <div
+          {...attributes}
+          style={styles.root.style}
+          className={theme.classNames(styles.root.className, className)}
+        ref={rootElm => this.rootElm = rootElm}
+        >
+          <div {...styles.pickerModal}>
+            <div {...styles.listViews}>
+              <ListView
+                ref={monthListView => this.monthListView = monthListView}
+                style={inlineStyles.listView}
+                listItemStyle={inlineStyles.listItem}
+                defaultFocusListIndex={currMonth}
+                listSource={monthArray}
+                onChooseItem={month => {
+                  this.setDate(void 0, month, void 0);
+                }}
+              />
+              <ListView
+                ref={dateListView => this.dateListView = dateListView}
+                style={inlineStyles.listView}
+                listItemStyle={inlineStyles.listItem}
+                defaultFocusListIndex={this.dateIndex}
+                listSource={dateArray}
+                onChooseItem={dayIndex => {
+                  this.setDate(dayIndex + 1, void 0, void 0);
+                }}
+              />
+              <ListView
+                ref={yearListView => this.yearListView = yearListView}
+                style={inlineStyles.listView}
+                listItemStyle={inlineStyles.listItem}
+                defaultFocusListIndex={this.yearIndex}
+                listSource={yearArray}
+                onChooseItem={yearIndex => {
+                  this.setDate(void 0, void 0, minYear + yearIndex);
+                }}
+              />
+            </div>
+            <div {...styles.iconButtonGroup}>
+              <IconButton
+                style={inlineStyles.iconButton}
+                size={pickerItemHeight}
+                onClick={() => {
+                  onChangeDate(currDate);
+                  this.setState({ showPicker: false });
+                }}
+              >
+                AcceptLegacy
+              </IconButton>
+              <IconButton
+                style={inlineStyles.iconButton}
+                size={pickerItemHeight}
+                onClick={() => {
+                  this.setState({ currDate: this.prevDate, showPicker: false });
+                }}
+              >
+                ClearLegacy
+              </IconButton>
+            </div>
+          </div>
+          <span
+            {...styles.button}
+            onClick={this.toggleShowPicker}
+          >
+            {monthList[currMonth]}
+          </span>
+          {separator}
+          <span
+            {...styles.button}
+            onClick={this.toggleShowPicker}
+          >
+            {currDateNumb}
+          </span>
+          {separator}
+          <span
+            {...styles.button}
+            onClick={this.toggleShowPicker}
+          >
+            {currYear}
+          </span>
+        </div>
       </PseudoClasses>
-    ) : normalRender;
+    );
   }
 }
 
@@ -288,6 +280,7 @@ function getStyles(datePicker: DatePicker): {
   listViews?: React.CSSProperties;
   listView?: React.CSSProperties;
   listItem?: React.CSSProperties;
+  iconButtonGroup?: React.CSSProperties;
   iconButton?: React.CSSProperties;
 } {
   const {
@@ -376,6 +369,10 @@ function getStyles(datePicker: DatePicker): {
       lineHeight: `${inputItemHeight - 4}px`,
       padding: `0 ${inputItemHeight - 4}px`
     },
+    iconButtonGroup: {
+      boxShadow: `inset 0 0 0 1px ${theme.baseLow}`,
+      zIndex: theme.zIndex.flyout + 1
+    },
     iconButton: {
       verticalAlign: "top",
       width: "50%",