Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@shopify/app-cli-node-generator-helper
Advanced tools
@shopify/app-cli-node-generator-helper - npm Package Compare versions
Comparing version 1.2.1 to 1.2.2
| { | ||
| "name": "@shopify/app-cli-node-generator-helper", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "helpers to generate code for shopify-app-node", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -5,40 +5,148 @@ const { toPascalCase } = require("../utilities"); | ||
| const componentName = toPascalCase(handle); | ||
| return `import { Avatar, Card, FilterType, Page, ResourceList, TextStyle } from '@shopify/polaris'; | ||
| return `import React, {useCallback, useState} from 'react'; | ||
| import { Avatar, Card, Button, ResourceItem, ResourceList, TextStyle, TextField, Filters } from '@shopify/polaris'; | ||
| export default class ${componentName} extends React.Component { | ||
| state = { | ||
| selectedItems: [], | ||
| sortValue: 'DATE_MODIFIED_DESC', | ||
| searchValue: '', | ||
| appliedFilters: [ | ||
| { | ||
| key: 'accountStatusFilter', | ||
| value: 'Account enabled', | ||
| }, | ||
| ], | ||
| export default function ${componentName}() { | ||
| const [selectedItems, setSelectedItems] = useState([]); | ||
| const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC'); | ||
| const [taggedWith, setTaggedWith] = useState('VIP'); | ||
| const [queryValue, setQueryValue] = useState(null); | ||
| const handleTaggedWithChange = useCallback( | ||
| (value) => setTaggedWith(value), | ||
| [], | ||
| ); | ||
| const handleQueryValueChange = useCallback( | ||
| (value) => setQueryValue(value), | ||
| [], | ||
| ); | ||
| const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []); | ||
| const handleQueryValueRemove = useCallback(() => setQueryValue(null), []); | ||
| const handleClearAll = useCallback(() => { | ||
| handleTaggedWithRemove(); | ||
| handleQueryValueRemove(); | ||
| }, [handleQueryValueRemove, handleTaggedWithRemove]); | ||
| const resourceName = { | ||
| singular: 'customer', | ||
| plural: 'customers', | ||
| }; | ||
| handleSearchChange = (searchValue) => { | ||
| this.setState({ searchValue }); | ||
| }; | ||
| handleFiltersChange = (appliedFilters) => { | ||
| this.setState({ appliedFilters }); | ||
| }; | ||
| handleSortChange = (sortValue) => { | ||
| this.setState({ sortValue }); | ||
| }; | ||
| handleSelectionChange = (selectedItems) => { | ||
| this.setState({ selectedItems }); | ||
| }; | ||
| renderItem = (item) => { | ||
| const { id, url, name, location, latestOrderUrl } = item; | ||
| const items = [ | ||
| { | ||
| id: 341, | ||
| url: 'customers/341', | ||
| name: 'Mae Jemison', | ||
| location: 'Decatur, USA', | ||
| latestOrderUrl: 'orders/1456', | ||
| }, | ||
| { | ||
| id: 256, | ||
| url: 'customers/256', | ||
| name: 'Ellen Ochoa', | ||
| location: 'Los Angeles, USA', | ||
| latestOrderUrl: 'orders/1457', | ||
| }, | ||
| ]; | ||
| const promotedBulkActions = [ | ||
| { | ||
| content: 'Edit customers', | ||
| onAction: () => console.log('Todo: implement bulk edit'), | ||
| }, | ||
| ]; | ||
| const bulkActions = [ | ||
| { | ||
| content: 'Add tags', | ||
| onAction: () => console.log('Todo: implement bulk add tags'), | ||
| }, | ||
| { | ||
| content: 'Remove tags', | ||
| onAction: () => console.log('Todo: implement bulk remove tags'), | ||
| }, | ||
| { | ||
| content: 'Delete customers', | ||
| onAction: () => console.log('Todo: implement bulk delete'), | ||
| }, | ||
| ]; | ||
| const filters = [ | ||
| { | ||
| key: 'taggedWith', | ||
| label: 'Tagged with', | ||
| filter: ( | ||
| <TextField | ||
| label="Tagged with" | ||
| value={taggedWith} | ||
| onChange={handleTaggedWithChange} | ||
| labelHidden | ||
| /> | ||
| ), | ||
| shortcut: true, | ||
| }, | ||
| ]; | ||
| const appliedFilters = !isEmpty(taggedWith) | ||
| ? [ | ||
| { | ||
| key: 'taggedWith', | ||
| label: disambiguateLabel('taggedWith', taggedWith), | ||
| onRemove: handleTaggedWithRemove, | ||
| }, | ||
| ] | ||
| : []; | ||
| const filterControl = ( | ||
| <Filters | ||
| queryValue={queryValue} | ||
| filters={filters} | ||
| appliedFilters={appliedFilters} | ||
| onQueryChange={handleQueryValueChange} | ||
| onQueryClear={handleQueryValueRemove} | ||
| onClearAll={handleClearAll} | ||
| > | ||
| <div style={{paddingLeft: '8px'}}> | ||
| <Button onClick={() => console.log('New filter saved')}>Save</Button> | ||
| </div> | ||
| </Filters> | ||
| ); | ||
| return ( | ||
| <Card> | ||
| <ResourceList | ||
| resourceName={resourceName} | ||
| items={items} | ||
| renderItem={renderItem} | ||
| selectedItems={selectedItems} | ||
| onSelectionChange={setSelectedItems} | ||
| promotedBulkActions={promotedBulkActions} | ||
| bulkActions={bulkActions} | ||
| sortValue={sortValue} | ||
| sortOptions={[ | ||
| {label: 'Newest update', value: 'DATE_MODIFIED_DESC'}, | ||
| {label: 'Oldest update', value: 'DATE_MODIFIED_ASC'}, | ||
| ]} | ||
| onSortChange={(selected) => { | ||
| setSortValue(selected); | ||
| console.log("Sort option changed to " + selected); | ||
| }} | ||
| filterControl={filterControl} | ||
| /> | ||
| </Card> | ||
| ); | ||
| function renderItem(item) { | ||
| const {id, url, name, location, latestOrderUrl} = item; | ||
| const media = <Avatar customer size="medium" name={name} />; | ||
| const shortcutActions = latestOrderUrl | ||
| ? [{ content: 'View latest order', url: latestOrderUrl }] | ||
| ? [{content: 'View latest order', url: latestOrderUrl}] | ||
| : null; | ||
| return ( | ||
| <ResourceList.Item | ||
| <ResourceItem | ||
| id={id} | ||
| url={url} | ||
| media={media} | ||
| accessibilityLabel={'View details for example'} | ||
| accessibilityLabel={"View details for " + name} | ||
| shortcutActions={shortcutActions} | ||
@@ -51,102 +159,25 @@ persistActions | ||
| <div>{location}</div> | ||
| </ResourceList.Item> | ||
| </ResourceItem> | ||
| ); | ||
| }; | ||
| render() { | ||
| const resourceName = { | ||
| singular: 'customer', | ||
| plural: 'customers', | ||
| }; | ||
| const items = [ | ||
| { | ||
| id: 341, | ||
| url: 'customers/341', | ||
| name: 'Mae Jemison', | ||
| location: 'Decatur, USA', | ||
| latestOrderUrl: 'orders/1456', | ||
| }, | ||
| { | ||
| id: 256, | ||
| url: 'customers/256', | ||
| name: 'Ellen Ochoa', | ||
| location: 'Los Angeles, USA', | ||
| latestOrderUrl: 'orders/1457', | ||
| }, | ||
| ]; | ||
| const promotedBulkActions = [ | ||
| { | ||
| content: 'Edit customers', | ||
| onAction: () => console.log('Todo: implement bulk edit'), | ||
| }, | ||
| ]; | ||
| const bulkActions = [ | ||
| { | ||
| content: 'Add tags', | ||
| onAction: () => console.log('Todo: implement bulk add tags'), | ||
| }, | ||
| { | ||
| content: 'Remove tags', | ||
| onAction: () => console.log('Todo: implement bulk remove tags'), | ||
| }, | ||
| { | ||
| content: 'Delete customers', | ||
| onAction: () => console.log('Todo: implement bulk delete'), | ||
| }, | ||
| ]; | ||
| const filters = [ | ||
| { | ||
| key: 'orderCountFilter', | ||
| label: 'Number of orders', | ||
| operatorText: 'is greater than', | ||
| type: FilterType.TextField, | ||
| }, | ||
| { | ||
| key: 'accountStatusFilter', | ||
| label: 'Account status', | ||
| operatorText: 'is', | ||
| type: FilterType.Select, | ||
| options: ['Enabled', 'Invited', 'Not invited', 'Declined'], | ||
| }, | ||
| ]; | ||
| const filterControl = ( | ||
| <ResourceList.FilterControl | ||
| filters={filters} | ||
| appliedFilters={this.state.appliedFilters} | ||
| onFiltersChange={this.handleFiltersChange} | ||
| searchValue={this.state.searchValue} | ||
| onSearchChange={this.handleSearchChange} | ||
| additionalAction={{ | ||
| content: 'Save', | ||
| onAction: () => console.log('New filter saved'), | ||
| }} | ||
| /> | ||
| ); | ||
| return ( | ||
| <Page> | ||
| <Card> | ||
| <ResourceList | ||
| resourceName={resourceName} | ||
| items={items} | ||
| renderItem={this.renderItem} | ||
| selectedItems={this.state.selectedItems} | ||
| onSelectionChange={this.handleSelectionChange} | ||
| promotedBulkActions={promotedBulkActions} | ||
| bulkActions={bulkActions} | ||
| sortValue={this.state.sortValue} | ||
| sortOptions={[ | ||
| { label: 'Newest update', value: 'DATE_MODIFIED_DESC' }, | ||
| { label: 'Oldest update', value: 'DATE_MODIFIED_ASC' }, | ||
| ]} | ||
| onSortChange={(selected) => { | ||
| this.setState({ sortValue: selected }); | ||
| }} | ||
| filterControl={filterControl} | ||
| /> | ||
| </Card> | ||
| </Page> | ||
| ); | ||
| } | ||
| };`; | ||
| function disambiguateLabel(key, value) { | ||
| switch (key) { | ||
| case 'taggedWith': | ||
| return "Tagged with " + value; | ||
| default: | ||
| return value; | ||
| } | ||
| } | ||
| function isEmpty(value) { | ||
| if (Array.isArray(value)) { | ||
| return value.length === 0; | ||
| } else { | ||
| return value === '' || value == null; | ||
| } | ||
| } | ||
| }`; | ||
| }; | ||
| module.exports = createListTemplate; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.58%
48880
- Number of package files
- increased by3.23%
32
- Lines of code
- increased by1.7%
1078
No dependency changes