New search bar

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 2.5.0
+* ExampleTypes: Add an expanding/collapsing TagsQuerySearchBar component
+
 # 2.4.1
 * Adds the latest version of Moment to the dependencies
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "contexture-react",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "React components for building contexture interfaces",
   "main": "dist/index.js",
   "scripts": {
@@ -124,6 +124,7 @@
     "react-date-picker": "^7.2.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
+    "react-measure": "^2.3.0",
     "react-outside-click-handler": "^1.2.3",
     "recompose": "^0.30.0"
   },

src/exampleTypes/ExpandableTagsQuery/ExpandArrow.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import F from 'futil-js'
+import _ from 'lodash/fp'
+import { observer } from 'mobx-react'
+import { Flex } from '../../greyVest'
+import { withTheme } from '../../utils/theme'
+
+let ExpandArrow = ({ collapse, tagsLength, style, theme: { Icon } }) =>
+  !!(F.view(collapse) && tagsLength) && (
+    <div className="expand-arrow" onClick={F.off(collapse)} style={style}>
+      <div
+        style={{
+          height: 0,
+          cursor: 'pointer',
+          textAlign: 'center',
+        }}
+        title="Expand to see all tags"
+      >
+        <Flex
+          style={{
+            display: 'inline-flex',
+            backgroundColor: 'white',
+            borderRadius: 4,
+            padding: '5px 12px',
+            boxShadow: '0 1px 4px 0 rgba(39, 44, 65, 0.1)',
+            color: '#9b9b9b',
+            fontWeight: 400,
+          }}
+          alignItems="center"
+          justifyContent="center"
+        >
+          View all {tagsLength} tags
+          <Icon icon="Expand" style={{ fontSize: 16, marginLeft: 6 }} />
+        </Flex>
+      </div>
+    </div>
+  )
+
+export default _.flow(
+  observer,
+  withTheme
+)(ExpandArrow)

src/exampleTypes/ExpandableTagsQuery/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import F from 'futil-js'
+import { withContentRect } from 'react-measure'
+import { contexturify } from '../../utils/hoc'
+import TagsQuery from '../TagsQuery'
+import ExpandArrow from './ExpandArrow'
+
+let collapsedStyle = {
+  maxHeight: 40,
+  overflowY: 'auto',
+}
+
+let ExpandableTagsQuery = ({ measureRef, contentRect, collapse, ...props }) => (
+  <>
+    <div style={F.view(collapse) ? collapsedStyle : {}}>
+      <div ref={measureRef}>
+        <TagsQuery {...props} />
+      </div>
+    </div>
+    {F.view(collapse) && contentRect.entry.height > 70 && (
+      <ExpandArrow collapse={collapse} tagsLength={props.node.tags.length} />
+    )}
+  </>
+)
+
+export default _.flow(
+  contexturify,
+  withContentRect()
+)(ExpandableTagsQuery)

src/exampleTypes/TagsQuery/ActionsMenu.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import F from 'futil-js'
+import { observer } from 'mobx-react'
+import TagsJoinPicker from '../TagsJoinPicker'
+import { withTheme } from '../../utils/theme'
+import { Flex } from '../../greyVest'
+import { copyTags } from './utils'
+
+let ActionsMenu = ({ node, tree, open, theme: { Button, Checkbox } }) => (
+  <Flex
+    style={{ minWidth: 240, padding: 10 }}
+    className="tags-query-actions-menu"
+    column
+    justifyContent="stretch"
+    alignItems="stretch"
+  >
+    {!!_.get('tags.length', node) && (
+      <>
+        <Button
+          onClick={() => {
+            copyTags(node)
+            F.off(open)()
+          }}
+        >
+          Copy Keywords
+        </Button>
+        <Button
+          style={{ margin: '10px 0' }}
+          onClick={() => {
+            tree.mutate(node.path, {
+              tags: [],
+            })
+            F.off(open)()
+          }}
+        >
+          Clear Keywords
+        </Button>
+        <div className="line-separator" />
+      </>
+    )}
+    <label className="labeled-checkbox" style={{ margin: '10px 0' }}>
+      <Checkbox
+        htmlId="stemming"
+        checked={!node.exact}
+        onChange={e => tree.mutate(node.path, { exact: !e.target.checked })}
+      />
+      <span>Include word variations</span>
+    </label>
+    <div>
+      <TagsJoinPicker node={node} tree={tree} />
+    </div>
+  </Flex>
+)
+
+export default _.flow(
+  observer,
+  withTheme
+)(ActionsMenu)