@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/tab/tab.jsx

@@ -0,0 +1,195 @@
+import React, { Children, PureComponent, createRef } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import NavChild from './nav-child';
+
+import mergeClassName from '../../tools/merge-class-name';
+import checkKey from '../../tools/object-key-check';
+import Panel from './panel';
+
+const extraWidth = 2; // 文字宽度两边额外的宽度
+
+class Tab extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { $active: null };
+    this.navChildRef = {};
+    this.line = createRef();
+    this.nav = createRef();
+    this.setActive = this.setActive.bind(this);
+  }
+
+  componentDidMount() {
+    const { active, defaultActive, children } = this.props;
+    const realActive = active
+      || defaultActive
+      || Children.toArray(children).find(ch => checkKey(ch.props, 'name')).props.name;
+
+    this.setActive(realActive, true);
+  }
+
+  componentDidUpdate() {
+    const { $active } = this.state;
+    const { active = $active, autoWidth } = this.props;
+
+    const { width, translateX } = this.setLineStyle(active);
+
+    if (
+      this.line.current.style.width === width
+      && this.line.current.style.transform === translateX
+    ) return;
+
+    // 如果配置了自适应宽度，则需要调整tabs容器来让被激活的tab居中
+    if (autoWidth) this.setTabsTransform(active);
+
+    this.line.current.style.width = width;
+    this.line.current.style.transform = translateX;
+  }
+
+  // 激活对应的tab页头, notNotice代表是否需要触发onchange
+  setActive(name, notNotice) {
+    const { onChange } = this.props;
+
+    this.setState({ $active: name });
+
+    if (!notNotice && typeof onChange === 'function') onChange(name);
+  }
+
+  // 设置下划线的位置
+  setLineStyle(active) {
+    if (!this.navChildRef[active]) return {};
+
+    const textEl = this.navChildRef[active].text.current;
+    const childEl = this.navChildRef[active].navChild.current;
+
+    const { clientWidth, offsetLeft } = textEl; // 下划线的宽度
+    const offsetLeftN = childEl.offsetLeft; // 下划线的位置
+
+    return Object.assign({}, { // lineStyle
+      width: `${clientWidth + (2 * extraWidth)}px`,
+      translateX: `translateX(${offsetLeftN + offsetLeft - extraWidth}px)`,
+    });
+  }
+
+  // 当tab标题总长度超过容器长度时，设置容器的transform来保证被选中的tab居中
+  setTabsTransform(active) {
+    if (!this.navChildRef[active]) return;
+
+    const childEl = this.navChildRef[active].navChild.current; // 当前选中的tab
+
+    let totalWidth = 0; // 所有的tab的总长度
+    Object.keys(this.navChildRef).forEach((key) => {
+      totalWidth += this.navChildRef[key].navChild.current.clientWidth;
+    });
+
+    const navWidth = this.nav.current.clientWidth;
+    const maxOffset = totalWidth - navWidth; // 最大偏移量
+    let offset = childEl.offsetLeft - (navWidth / 2) + (childEl.clientWidth / 2); // 需要偏移量
+
+    if (offset < 0) offset = 0;
+    if (offset > maxOffset) offset = maxOffset;
+
+    // this.nav.current.style.transform = `translateX(${-offset}px)`;
+    this.nav.current.scrollLeft = offset;
+  }
+
+  createHeader() {
+    const { $active } = this.state;
+    const { active = $active, children, color, autoWidth } = this.props;
+
+    const tabs = [];
+    Children.toArray(children).forEach((child) => {
+      if (!child || !child.type) return;
+
+      if (checkKey(child.props, 'name')) {
+        const { name, width, tab } = child.props;
+        const nav = (
+          <NavChild
+            ref={(el) => {
+              this.navChildRef[name] = el;
+            }}
+            tab={tab}
+            name={name}
+            active={active}
+            onClick={this.setActive}
+            color={color}
+            width={width || `${100 / Children.toArray(children).length}%`}
+            autoWidth={autoWidth}
+          />
+        );
+        tabs.push(nav);
+      }
+    });
+
+    if (tabs.length === 0) return null;
+
+    return tabs;
+  }
+
+  createContent() {
+    const { $active } = this.state;
+    const { active = $active, children } = this.props;
+
+    const contents = [];
+    Children.toArray(children).forEach((child) => {
+      if (!child || !child.type) return;
+
+      if (checkKey(child.props, 'name')) {
+        const { name, className } = child.props;
+        const content = (
+          <div className={mergeClassName([active !== name && styles['sm-none'], className])}>
+            {child.props.children}
+          </div>
+        );
+        contents.push(content);
+      }
+    });
+
+    if (contents.length === 0) return null;
+
+    return contents;
+  }
+
+  render() {
+    const { tabClassName, contentClassName, contentStyle, color, border, autoWidth } = this.props;
+
+    const tabs = this.createHeader();
+    const contents = this.createContent();
+
+    return (
+      <div className={tabClassName}>
+        <div className={mergeClassName([
+          styles['sm-tabs'],
+          border && styles['sm-tabs-border'],
+        ])}
+        >
+          <div ref={this.nav} className={mergeClassName([styles['sm-tabs-nav'], autoWidth && styles['sm-tabs-nav-scroll']])}>
+            {tabs}
+            <div ref={this.line} className={mergeClassName([styles['sm-tabs-line'], styles[`sm-tabs-line-${color}`]])} />
+          </div>
+        </div>
+        <div className={contentClassName} style={contentStyle}>{contents}</div>
+      </div>
+    );
+  }
+}
+
+Tab.propTypes = {
+  defaultActive: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  children: PropTypes.instanceOf(Panel),
+  onChange: PropTypes.func,
+  tabClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
+  contentStyle: PropTypes.objectOf(PropTypes.any),
+  color: PropTypes.oneOf(['blue', 'red']),
+  autoWidth: PropTypes.bool,
+  border: PropTypes.bool,
+};
+
+Tab.defaultProps = {
+  autoWidth: false,
+  border: true,
+};
+
+export default Tab;

package/src/component/tag/index.jsx

@@ -0,0 +1,3 @@
+import Tag from './tag';
+
+export default Tag;

package/src/component/tag/style.less

@@ -0,0 +1,56 @@
+@import "../../styles/color";
+
+.tag-default {
+  display: inline-block;
+  padding: 2px 5px;
+  border-radius: 2px;
+  text-align: center;
+  font-size: 12px;
+
+  &-green {
+    background: #DCFAEA;
+    color: @green;
+  }
+  &-red {
+    background: #FFECEB;
+    color: @red;
+  }
+  &-blue {
+    background: #EBF5FF;
+    color: @blue;
+  }
+  &-purple {
+    background: #EBE6FF;
+    color: #8C68FE;
+  }
+  &-fuchsia {
+    background: #FEEBFF;
+    color: #B530FF;
+  }
+  &-yellow {
+    background: #FFFBEB;
+    color: #E6A117;
+  }
+}
+
+.tag-plain {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  text-align: center;
+  border: 1px solid;
+  font-size: 12px;
+
+  &-pink{
+    border-color: #FDD3D0;
+    color: #FB9088;
+  }
+  &-yellow{
+    border-color: #F6DDA1;
+    color: #E9AB17;
+  }
+  &-green{
+    border-color: #DCFAEA;
+    color: @green;
+  }
+}

package/src/component/tag/tag.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import mergeClassName from '../../tools/merge-class-name';
+
+const Tag = (args) => {
+  const {
+    style,
+    className,
+    plain,
+    text,
+    children,
+    color,
+    textColor,
+    ...other
+  } = args;
+  const plainText = plain ? 'plain' : 'default';
+  return (
+    <span
+      className={
+        mergeClassName([
+          styles[`tag-${plainText}`],
+          styles[`tag-${plainText}-${color}`],
+          className,
+        ])
+      }
+      style={{
+        ...(color ? plain ? { borderColor: color } : { background: color } : {}),
+        ...(textColor ? { color: textColor } : {}),
+        ...style,
+      }}
+      {...other}
+    >
+      { text || children }
+    </span>
+  );
+};
+
+Tag.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  text: PropTypes.node,
+  children: PropTypes.node,
+  plain: PropTypes.bool,
+  color: PropTypes.string,
+  textColor: PropTypes.string,
+};
+
+Tag.defaultProps = {
+};
+
+export default Tag;

package/src/component/toast/content.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import Icon from '../icons';
+import mergeClassName from '../../tools/merge-class-name';
+
+const Content = ({ children, cover, icon }) => (
+  <div className={mergeClassName([styles.cover, cover && styles['cover-background']])}>
+    <div className={styles['sm-toast-content']}>
+      {
+        icon
+          ? (
+            <Icon
+              className={mergeClassName([styles['sm-toast-content-icon'], styles[`sm-toast-content-icon-${icon}`]])}
+              name={icon}
+            />
+          )
+          : null
+      }
+      <span className={styles['sm-toast-content-text']}>{children}</span>
+    </div>
+  </div>
+);
+
+Content.propTypes = {
+  children: PropTypes.node,
+  cover: PropTypes.bool,
+  icon: PropTypes.string,
+};
+
+export default Content;

package/src/component/toast/index.js

@@ -0,0 +1,3 @@
+import Toast from './toast';
+
+export default Toast;

package/src/component/toast/style.less

@@ -0,0 +1,50 @@
+@import "../../styles/index";
+@import "../../styles/color";
+
+.cover{
+
+  &-background{
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+.sm-toast{
+  &-content{
+    .sm-position-center;
+    min-width: 100px;
+    max-width: 60%;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 15px 20px;
+
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.65);
+    color: @white;
+    text-align: center;
+
+    &-icon{
+      font-size: 2.5em;
+      margin-bottom: 12px;
+
+      //&-success{
+      //  color: @green;
+      //}
+      //&-fail{
+      //  color: @red;
+      //}
+    }
+
+    &-text{
+      //.sm-ellipsis;
+      max-width: 100%;
+      display: inline-block;
+
+      margin: auto;
+    }
+  }
+}

package/src/component/toast/toast.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import Container from '../../tools/create-body-container';
+
+import Content from './content';
+
+let timeout = null;
+
+// 负责挂在节点和移除节点
+class Dom {
+  constructor(delay) {
+    this.container = new Container('toast');
+    this.containerEl = this.container.getEl();
+    this.delay = delay || 2;
+  }
+
+  render(el, delay) {
+    if (timeout) {
+      ReactDom.unmountComponentAtNode(this.containerEl);
+      clearTimeout(timeout);
+    }
+
+    this.containerEl.style.visibility = 'visible';
+    this.containerEl.addEventListener('click', () => this.destroy());
+
+    ReactDom.render(el, this.containerEl);
+
+    timeout = setTimeout(() => this.destroy(this.containerEl), (delay || this.delay) * 1000);
+  }
+
+  destroy() {
+    this.containerEl.style.visibility = 'hidden';
+    ReactDom.unmountComponentAtNode(this.containerEl);
+  }
+}
+
+class Toast {
+  constructor(delay) {
+    this.dom = new Dom(delay);
+  }
+
+  info(text, delay) {
+    this.dom.render(<Content>{text}</Content>, delay);
+  }
+
+  success(text, delay) {
+    const el = (
+      <Content icon="success">{text}</Content>
+    );
+    this.dom.render(el, delay);
+  }
+
+  fail(text, delay) {
+    this.dom.render(<Content icon="fail">{text}</Content>, delay);
+  }
+
+  loading(text, delay) {
+    this.dom.render(<Content cover>{text}</Content>, delay);
+  }
+}
+
+export default new Toast();

package/src/component/touchable/index.js

@@ -0,0 +1,3 @@
+import Touchable from './touchable';
+
+export default Touchable;

package/src/component/touchable/style.less

@@ -0,0 +1,33 @@
+@import "../../styles/color";
+
+.touchable {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    border-color: #000000;
+    border-radius: inherit;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: .1;
+  }
+}

package/src/component/touchable/touchable.jsx

@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import mergeClassName from '../../tools/merge-class-name';
+
+class Touchable extends PureComponent {
+  render() {
+    const {
+      className,
+      disabled,
+      children,
+      ...otherProps
+    } = this.props;
+
+    const finallyClassName = mergeClassName([
+      styles.touchable,
+      className,
+    ]);
+
+    return (
+      <button
+        type="button"
+        className={finallyClassName}
+        disabled={disabled}
+        {...otherProps}
+      >
+        {children}
+      </button>
+    );
+  }
+}
+
+Touchable.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+Touchable.defaultProps = {
+  disabled: false,
+};
+
+export default Touchable;