Progress

app/javascript/gabsocial/features/list_create.js

@@ -0,0 +1,73 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { changeListEditorTitle, submitListEditor } from '../actions/lists'
+import Button from '../components/button'
+import Input from '../components/input'
+import Text from '../components/text'
+
+const messages = defineMessages({
+  label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
+})
+
+const mapStateToProps = state => ({
+  value: state.getIn(['listEditor', 'title']),
+  disabled: state.getIn(['listEditor', 'isSubmitting']),
+})
+
+const mapDispatchToProps = dispatch => ({
+  onChange: value => dispatch(changeListEditorTitle(value)),
+  onSubmit: () => dispatch(submitListEditor(true)),
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListCreate extends PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {
+      value,
+      disabled,
+      intl,
+      onSubmit,
+      onChange
+    } = this.props
+
+    return (
+      <form onSubmit={onSubmit}>
+        <Input
+          title={intl.formatMessage(messages.label)}
+          placeholder='My new list...'
+          value={value}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          disabled={disabled}
+        />
+
+        <div className={[_s.default, _s.marginVertical10PX, _s.paddingVertical5PX, _s.marginLeft10PX].join(' ')}>
+          <Text color='secondary' size='small'>
+            Lists are private and only you can see who is on a list.<br/>
+            No one else can view your lists. No one knows that they are on your list.
+          </Text>
+        </div>
+
+        <Button
+          className={_s.marginLeft10PX}
+        >
+          <Text color='white'>
+            {intl.formatMessage(messages.create)}
+          </Text>
+        </Button>
+      </form>
+    )
+  }
+
+}