@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/multiple-selector/style.less

@@ -0,0 +1,78 @@
+@import "../../styles/color";
+@import "../../styles/font";
+@import "../../styles/format-theme";
+
+.drawer{
+  display: flex;
+  flex-direction: column;
+}
+
+.normal-title{
+  line-height: @multiple-title-line-height;
+  //font-family: @medium;
+  font-size: @size-big;
+  font-weight: @weight-bold;
+  text-align: center;
+}
+
+.container{
+  display: flex;
+  width: 200%;
+  flex: 1;
+
+  overflow: auto;
+  transition: 0.3s;
+
+  &-content{
+    flex: 1;
+    margin: 0;
+    padding: 0;
+
+    overflow: auto;
+    border-top: 1px solid @border-color;
+  }
+}
+
+.selector{
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 15px;
+
+  border-bottom: 1px solid @border-color;
+
+  list-style: none;
+  cursor: pointer;
+
+  &-result-text {
+    margin-right: 8px;
+
+    color: @gray-darker;
+  }
+
+  &-right-icon {
+    color: @gray-dark;
+  }
+
+  &:active{
+    background: rgba(229, 229, 229, 0.5);
+  }
+}
+
+.item{
+  height: 44px;
+  display: flex;
+  align-items: center;
+
+  padding: 0 15px;
+
+  border-bottom: 1px solid @border-color;
+
+  list-style: none;
+
+  &:active{
+    background: rgba(229, 229, 229, 0.5);
+  }
+}

package/src/component/notice-bar/index.jsx

@@ -0,0 +1,3 @@
+import NoticeBar from './notice-bar';
+
+export default NoticeBar;

package/src/component/notice-bar/notice-bar.jsx

@@ -0,0 +1,86 @@
+import React, { PureComponent, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import Icon from '../icons';
+
+import mergeClassName from '../../tools/merge-class-name';
+
+const classname = 'sm-notice-bar';
+
+class NoticeBar extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      animationStyle: {},
+    };
+    this.container = React.createRef();
+  }
+
+  componentDidMount() {
+    this.createStyle();
+  }
+
+  leftIcon() {
+    const { icon } = this.props;
+    if (isValidElement(icon)) return icon;
+    if (typeof icon === 'string') return (<Icon name={icon} className={styles[`${classname}-left-icon`]} />);
+    if (icon) return (<Icon name="inform" className={styles[`${classname}-left-icon`]} />);
+    return null;
+  }
+
+  // 构建动画的起点、延迟、速率
+  createStyle() {
+    const { delay, speed, scrollable } = this.props;
+    const animationStyle = {};
+
+    if (scrollable) {
+      animationStyle.paddingLeft = this.container.current.clientWidth;
+      animationStyle.animationDelay = `${delay}s`;
+      animationStyle.animationDuration = `${this.container.current.clientWidth / speed}s`;
+    }
+
+    this.setState({ animationStyle });
+  }
+
+  render() {
+    const { text, className, style } = this.props;
+    const { animationStyle } = this.state;
+
+    const textClassName = mergeClassName([
+      styles[`${classname}-content`],
+      styles[`${classname}-play-infinite`],
+    ]);
+
+    return (
+      <div
+        ref={this.container}
+        role="alert"
+        className={mergeClassName([styles[classname], className])}
+        style={style}
+      >
+        {this.leftIcon()}
+        <div className={styles[`${classname}-wrap`]}>
+          <div className={textClassName} style={animationStyle}>{text}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+NoticeBar.propTypes = {
+  text: PropTypes.node,
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  delay: PropTypes.number,
+  speed: PropTypes.number,
+  scrollable: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+};
+
+NoticeBar.defaultProps = {
+  delay: 1,
+  speed: 50,
+  scrollable: true,
+};
+
+export default NoticeBar;

package/src/component/notice-bar/style.less

@@ -0,0 +1,72 @@
+@import "../../styles/color";
+@import "../../styles/font";
+@import "../../styles/format-theme";
+
+.sm-notice-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: @notice-bar-height;
+  padding: @notice-bar-padding;
+  color: @orange-dark;
+  font-size: @size-normal;
+  line-height: @notice-bar-line-height;
+  background-color: @orange-light;
+
+  &-left-icon {
+    min-width: @notice-bar-icon-min-width;
+    font-size: @notice-bar-icon-size;
+  }
+
+  &-wrap {
+    position: relative;
+    flex: 1;
+    height: @notice-bar-line-height;
+    overflow: hidden;
+  }
+
+  &-content {
+    position: absolute;
+    white-space: nowrap;
+
+    &.sm-ellipsis {
+      max-width: 100%;
+    }
+  }
+
+  &-play {
+    animation: sm-notice-bar-play linear both;
+
+    &-infinite {
+      animation: sm-notice-bar-play-infinite linear infinite both;
+    }
+  }
+
+  &-wrapable {
+    height: auto;
+    //padding: @notice-bar-wrapable-padding;
+
+    .sm-notice-bar {
+      &-wrap {
+        height: auto;
+      }
+
+      &-content {
+        position: relative;
+        white-space: normal;
+      }
+    }
+  }
+}
+
+/**
+ * Declare two same keyframes
+ * In case that some mobile browsers can continue animation when className changed
+ */
+@keyframes sm-notice-bar-play {
+  to { transform: translate3d(-100%, 0, 0); }
+}
+
+@keyframes sm-notice-bar-play-infinite {
+  to { transform: translate3d(-100%, 0, 0); }
+}

package/src/component/notify/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Notify from './notify';
+
+Notify.show = function(args) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const props = typeof args === 'string' ? { content: args } : args;
+  const onClose = props.onClose;
+  const component = React.createElement(Notify, Object.assign(props, {
+    onClose: () => {
+      if (onClose instanceof Function) {
+        onClose();
+      }
+      ReactDOM.unmountComponentAtNode(container);
+      document.body.removeChild(container);
+    }
+  }));
+  ReactDOM.render(component, container);
+};
+
+Notify.success = function (args) {
+  const props = typeof args === 'string' ? { content: args } : args;
+  this.show({ ...props, type: 'success' })
+};
+
+Notify.warning = function (args) {
+  const props = typeof args === 'string' ? { content: args } : args;
+  this.show({ ...props, type: 'warning' })
+};
+
+Notify.danger = function (args) {
+  const props = typeof args === 'string' ? { content: args } : args;
+  this.show({ ...props, type: 'danger' })
+};
+
+export default Notify;

package/src/component/notify/notify.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {CSSTransition} from 'react-transition-group';
+import styles from './style.less';
+import mergeClassName from "../../tools/merge-class-name";
+
+class Notify extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      visible: true,
+      display: props.visible ? 'block' : 'none',
+    };
+    this.startTimer();
+  }
+
+  componentWillUnmount() {
+    this.stopTimer();
+  }
+
+  startTimer() {
+    const { duration } = this.props;
+    if (duration > 0) {
+      this.timeout = setTimeout(() => {
+        this.onClose();
+      }, duration)
+    }
+  }
+
+  stopTimer() {
+    clearTimeout(this.timeout);
+  }
+
+  onClose() {
+    this.stopTimer();
+
+    this.setState({
+      visible: false
+    });
+  }
+
+  setDisplay(show) {
+    this.setState({
+      display: show ? 'block' : 'none'
+    })
+  }
+
+  render() {
+    const { visible, display } = this.state;
+    const {
+      style,
+      className,
+      type,
+      content,
+      animationDuration,
+      singleton,
+      children,
+      color,
+      textColor,
+      onClose,
+    } = this.props;
+
+    return (
+      <CSSTransition
+        in={visible}
+        timeout={{
+          appear: 0,
+          enter: 0,
+          exit: animationDuration,
+        }}
+        classNames="notify-popup"
+        onEnter={() => this.setDisplay(true)}
+        onExited={() => {
+          this.setDisplay(false)
+          if (onClose instanceof Function) {
+            onClose();
+          }
+        }}
+        appear={true}
+        unmountOnExit={!singleton}
+      >
+        <div
+          className={
+            mergeClassName([
+              styles.notify,
+              styles['notify-popup'],
+              styles[`notify--${type}`],
+              className,
+            ])
+          }
+          style={{
+            background: color,
+            color: textColor,
+            ...style,
+            display,
+            transitionDuration: `${animationDuration}ms`
+          }}
+        >
+          {content || children}
+        </div>
+      </CSSTransition>
+    )
+  }
+}
+
+Notify.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  duration: PropTypes.number,
+  animationDuration: PropTypes.number,
+  color: PropTypes.string,
+  textColor: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+Notify.defaultProps = {
+  type: 'primary',
+  duration: 2000,
+  animationDuration: 350,
+  singleton: false,
+};
+
+export default Notify

package/src/component/notify/style.less

@@ -0,0 +1,48 @@
+@import "../../styles/var";
+
+.notify {
+  display: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: @size-normal;
+  color: @white;
+
+  &-popup {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    top: 0;
+    left: 0;
+  }
+  &--primary {
+    background-color: @notify-primary-background-color;
+  }
+
+  &--success {
+    background-color: @notify-success-background-color;
+  }
+
+  &--danger {
+    background-color: @notify-danger-background-color;
+  }
+
+  &--warning {
+    background-color: @notify-warning-background-color;
+  }
+}
+:global {
+  .notify-popup-appear, .notify-popup-appear-active {
+    transform: translate3d(0, -100%, 0);
+  }
+  .notify-popup-enter, .notify-popup-enter-active {
+    transform: translate3d(0, -100%, 0);
+  }
+  .notify-popup-exit, .notify-popup-exit-active {
+    transform: translate3d(0, -100%, 0);
+  }
+}

package/src/component/picker/drawPicker.jsx

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Picker from './picker';
+import Drawer from '../drawer';
+import PickerItem from './pickerItem';
+
+import styles from './style.less';
+
+/**
+ * 抽屉类型选择器
+ */
+class DrawPicker extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: '',
+    };
+
+    this.onPickerValueChange = this.onPickerValueChange.bind(this);
+  }
+
+  onPickerValueChange(value) {
+    this.setState({
+      selected: value,
+    });
+  }
+
+
+  render() {
+    const {
+      visible,
+      onCancel,
+      onConfirm,
+      data,
+      title,
+      height,
+      defaultValue,
+      ...others
+    } = this.props;
+    let { selected } = this.state;
+    if (selected === undefined || selected === '') {
+      selected = defaultValue;
+    }
+    return (
+      <Drawer
+        visible={visible}
+        onClose={onCancel}
+        position="bottom"
+        height={height}
+        drawerClass={styles['draw-picker']}
+      >
+        <div className={styles['sm-picker-header']}>
+          <div
+            className={styles['header-left']}
+            onClick={onCancel}
+          >
+            取消
+          </div>
+          <div className={styles['header-center']}>{title}</div>
+          <div
+            className={styles['header-right']}
+            onClick={() => onConfirm(selected)}
+          >
+            确定
+          </div>
+        </div>
+        <div className={styles['sm-picker']}>
+          {visible ? (
+            <Picker
+              value={selected}
+              onValueChange={this.onPickerValueChange}
+              {...others}
+            >
+              {data.map(item => (
+                <PickerItem key={item.value} value={item.value}>{item.label}</PickerItem>
+              ))}
+            </Picker>
+          ) : ''}
+        </div>
+      </Drawer>
+    );
+  }
+}
+
+
+DrawPicker.propTypes = {
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  title: PropTypes.string, // 标题
+  height: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  visible: PropTypes.bool,
+  data: PropTypes.arrayOf(PropTypes.any),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]),
+};
+
+DrawPicker.defaultProps = {
+  height: 400,
+};
+
+
+export default DrawPicker;

package/src/component/picker/index.js

@@ -0,0 +1,3 @@
+import DrawPicker from './drawPicker';
+
+export default DrawPicker;