narrow api, update example in playground

Author: d4rekanguok

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     quotes: [1, "single"],
     indent: "off",
     "react/prop-types": 0,
+    "react/display-name": 0,
     "@typescript-eslint/indent": ["error", 2],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",

packages/playground/index.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState, Fragment } from 'react'
+import React, { useEffect } from 'react'
 import { render } from 'react-dom'
 import cms from 'netlify-cms-app'
 import { Widget as IdWidget } from '@ncwidgets/id'
-// import { Widget as ReorderWidget } from '@ncwidgets/reorder'
+import { Widget as ReorderWidget, createControl } from '@ncwidgets/reorder'
 import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'
-import { createWidget as createReorderWidget } from '@ncwidgets/reorder'
 
 const loadData = async (dataPath) => {
   const data = await fetch(dataPath)
@@ -20,27 +19,40 @@ const createRoot = () => {
   return $root
 }
 
+const ListComponent = ({ item }) => (
+  <>
+    <strong>{item.title}</strong>
+    <p style={{ margin: 0, color: '#798291', fontSize: '0.8rem' }}>{item.id}</p>
+  </>
+)
+
+const CustomReorderPreview = ({ value }) => (
+  <section>
+    <hr />
+    <p>Custom Widget Preview</p>
+    {value.map((item, i) => <p key={i}>{item.get('title')}</p>)}
+  </section>
+)
+
+const CustomReorderControl = createControl({
+  renderListItem: item => <ListComponent item={item} />
+})
+
 const CMS = () => {
   useEffect(() => {
     loadData('./data.json')
 
-    const ListComponent = ({ item }) =>
-      <Fragment>
-        <strong>{item.title}</strong>
-        <p>{item.id}</p>
-      </Fragment>
-
-    const previewComponent = ({ value }) => 
-      value.map((item, i) => <p key={i}>{item.get('title')}</p>)
-
-    const ReorderWidget = createReorderWidget({ ListComponent, previewComponent })
-
     cms.registerWidget(IdWidget)
     cms.registerWidget(ReorderWidget)
+    cms.registerWidget({
+      name: 'custom-reorder',
+      controlComponent: CustomReorderControl,
+      previewComponent: CustomReorderPreview,
+    })
     cms.registerWidget(FileRelationWidget)
     cms.registerPreviewStyle('./preview.css')
     cms.init()
-  })
+  }, [])
 
   return <div id="nc-root"></div>
 }

packages/playground/static/config.yml

@@ -47,6 +47,15 @@ collections:
             collection: posts
             id_field: id
             display_fields: ['title', 'id']
+            hint: 'this reorder widget display entries from `posts` collection.'
+
+          - label: Featured Posts (Custom)
+            name: featured-custom
+            widget: custom-reorder
+            collection: posts
+            id_field: id
+            display_fields: ['title', 'id']
+            hint: 'this is a reorder widget with custom control'
 
   - label: Setting
     name: setting

packages/widget-reorder/src/control.tsx

@@ -1,12 +1,23 @@
-import React, { FunctionComponent as FC } from 'react'
-import { fromJS } from 'immutable'
+import * as React from 'react'
+import { fromJS, List } from 'immutable'
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
 import { WidgetProps } from '@ncwidgets/common-typings'
 
 import { reorder, diff, extract } from './utils'
 
-export const createControl = (ListElement: FC<{item: object}>) => {
-  return class extends React.Component<WidgetProps> {
+const defaultListItem = item => Object.values(item).join(' ')
+
+export interface CreateControlOptions {
+  renderListItem?: (item: object) => React.ComponentType<{ item: Record<string, any> }>;
+}
+
+type CreateControl = (options?: CreateControlOptions) => React.ComponentClass<WidgetProps>
+
+export const createControl: CreateControl = (options = {}) => {
+  const renderListItem = options.renderListItem || defaultListItem
+  
+  return class Control extends React.Component<WidgetProps> {
+
     public state = {
       data: [],
     }
@@ -16,9 +27,7 @@ export const createControl = (ListElement: FC<{item: object}>) => {
 
       const collection: string = field.get('collection')
       const fieldId: string = field.get('id_field')
-      const fieldDisplay: string[] = field.get('display_fields')
-
-      // @ts-ignore
+      const fieldDisplay: List<string> = field.get('display_fields')
       const fieldsToBeExtracted = Array.from(new Set([fieldId, ...fieldDisplay.toJS()]))
 
       const result = await query(forID, collection, [fieldId], '')
@@ -66,7 +75,6 @@ export const createControl = (ListElement: FC<{item: object}>) => {
       const { data } = this.state
 
       const fieldId: string = field.get('id_field')
-      const fieldDisplay: string[] = field.get('display_fields')
 
       if (data.length === 0) return <div>loading...</div>
       return (
@@ -103,8 +111,8 @@ export const createControl = (ListElement: FC<{item: object}>) => {
                           ...provided.draggableProps.style,
                         }}
                       >
-                      <ListElement item={extract(item, ...fieldDisplay)}/> 
-                    </div>
+                        {renderListItem(item)}
+                      </div>
                     )}
                   </Draggable>
                 ))}
@@ -116,8 +124,4 @@ export const createControl = (ListElement: FC<{item: object}>) => {
       )
     }
   }
-}
-
-export const Control = createControl(({ item }) => 
-  <div>{Object.keys(item).map(key => item[key]).join(' ')}</div>
-  )
+}

packages/widget-reorder/src/index.ts

@@ -1,25 +1,17 @@
-import { Control, createControl } from './control'
+import { createControl } from './control'
 import { Preview } from './preview'
 
+const Control = createControl()
+
 const Widget = {
   name: 'ncw-reorder',
   controlComponent: Control,
   previewComponent: Preview,
 }
 
-export const createWidget = (options) => {
-    const { previewComponent = Preview } = options
-    
-    return {
-      ...Widget,
-      name: options.name ? options.name : Widget.name,
-      controlComponent: createControl(options.ListComponent),
-      previewComponent
-    }
-}
-
 export {
   Widget,
   Control,
   Preview,
+  createControl,
 }

packages/widget-reorder/src/utils.test.ts

@@ -1,4 +1,4 @@
-import { removeOutdatedItem, diff } from './utils'
+import { removeOutdatedItem, diff, extract } from './utils'
 
 describe('removeOutdatedItem', () => {
   it('should remove outdated items', () => {
@@ -54,3 +54,20 @@ describe('diff', () => {
     expect(lastItem.id).toBe(4)
   })
 })
+
+describe('extract', () => {
+  it('should create a new shallow object with specified keys', () => {
+    const data = {
+      a: 100,
+      b: 200,
+      c: 300,
+    }
+    const expected = {
+      a: data.a,
+      b: data.b,
+    }
+    const result = extract(data, 'a', 'b')
+
+    expect(result).toEqual(expected)
+  })
+})