diff --git a/.travis.yml b/.travis.yml index 9ad645049..4f3a8ec42 100644 --- a/.travis.yml +++ b/.travis.yml @@ -7,8 +7,10 @@ git: branches: only: - develop - - "/^feature\\/.*$/" - - "/^fix\\/.*$/" + - master + - "/^feature\/.*$/" + - "/^feat\/.*$/" + - "/^fix\/.*$/" jobs: include: - stage: "Fundamental-react: Lint" @@ -20,3 +22,11 @@ notifications: email: on_failure: always on_success: change +before_deploy: +- bash ./ci-scripts/setup_npm.sh +deploy: + - provider: script + script: bash ./ci-scripts/publish.sh $TRAVIS_BRANCH $TRAVIS_BUILD_NUMBER + on: + branch: master + skip_cleanup: true \ No newline at end of file diff --git a/README.md b/README.md index 92748ad8d..daa525151 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - Fundamental-react is a set of [React.JS](https://reactjs.org/) components implementation of [SAP Fiori Fundamentals library](https://sap.github.io/fundamental/). **[Component Documentation](https://sap.github.io/fundamental-react/)** @@ -6,17 +5,17 @@ Fundamental-react is a set of [React.JS](https://reactjs.org/) components implem ## Current Version ``` -0.0.8-beta +0.0.12-beta ``` ## Build Status + [![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=develop)](https://travis-ci.org/SAP/fundamental-react) ## Description Fundamental-react is a set of [React.JS](https://reactjs.org/) components implementation of [SAP Fiori Fundamentals library](https://sap.github.io/fundamental/). SAP Fiori Fundamentals library is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. This will allow you to stay/use React for your application and get SAP look and feel. - ## Requirements To download and use Fundamental-react library, you first need to install the node package manager. @@ -47,18 +46,16 @@ $fd-icons-path: "~fiori-fundamentals/scss/icons/"; $fd-fonts-path: "~fiori-fundamentals/scss/fonts/"; @import '../node_modules/fiori-fundamentals/scss/all.scss'; ``` - -You can now use the [Component Documentation](https://sap.github.io/fundamental-react/) to browse the components currently available with Fundamental Vue. To use a Fundamental-react component, paste the desired code snippet from the Component Documentation and configure it as necessarry: - +You can now use the [Component Documentation](https://sap.github.io/fundamental-react/) to browse the components currently available with Fundamental Vue. To use a Fundamental-react component, paste the desired code snippet from the Component Documentation and configure it as necessarry: + ... - + ... - - -## Available Scripts + +## Available Scripts `npm start` @@ -102,6 +99,6 @@ Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE file](https://github.com/SAP/fundamental-react/blob/master/LICENSE.txt) ## Similar Projects -- [GitHub repo of Angular implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-ngx) -- [GitHub repo of Vue implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-vue) +- [GitHub repo of Angular implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-ngx) +- [GitHub repo of Vue implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-vue) diff --git a/ci-scripts/publish.sh b/ci-scripts/publish.sh new file mode 100644 index 000000000..6d4c0a00e --- /dev/null +++ b/ci-scripts/publish.sh @@ -0,0 +1,23 @@ +#! /bin/bash +git config --global user.email "travis@travisci.org" +git config --global user.name "travis" + +git checkout master +npm install +npm run build + +# update the package verion and commit to the git repository +npm run std-version + +# pushes changes to master +git push --quiet --follow-tags "https://$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG" "$TRAVIS_BRANCH" > /dev/null 2>&1; + +# commit changes made by standard-version to develop branch +git checkout develop +git merge master +git commit -a -m "chore: merge master into develop [ci skip]" +git push --quiet --follow-tags "https://$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG" develop > /dev/null 2>&1; + +# publish master to npm +git checkout master +npm publish \ No newline at end of file diff --git a/ci-scripts/setup_npm.sh b/ci-scripts/setup_npm.sh new file mode 100644 index 000000000..16a996460 --- /dev/null +++ b/ci-scripts/setup_npm.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +set -o nounset +set -o errexit + +echo "//registry.npmjs.org/:username=${NPM_USERNAME}" >> ~/.npmrc +echo "//registry.npmjs.org/:email=${NPM_EMAIL}" >> ~/.npmrc +echo "//registry.npmjs.org/:_password=${NPM_PASSWORD}" > ~/.npmrc +echo "//registry.npmjs.org/:_authToken=${AUTH_TOKEN}" >> ~/.npmrc \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 12c39ba79..eabaefaa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fundamental-react", - "version": "0.0.6-beta", + "version": "0.0.11-beta", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 11b6c440a..4fa8436e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fundamental-react", - "version": "0.0.11-beta", + "version": "0.0.12-beta", "private": false, "license": "Apache-2.0", "homepage": "http://sap.github.io/fundamental-react", @@ -22,6 +22,7 @@ "predeploy": "npm run build", "start-js": "node scripts/start.js", "start": "node scripts/start.js", + "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"", "test:coverage": "jest --coverage", "test:dev": "jest", "test": "node scripts/test.js", @@ -75,7 +76,7 @@ "terser-webpack-plugin": "1.1.0", "url-loader": "1.1.1", "webpack": "4.19.1", - "webpack-dev-server": "3.1.14", + "webpack-dev-server": "3.1.9", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "3.6.3" }, diff --git a/src/SearchInput/SearchInput.Component.js b/src/SearchInput/SearchInput.Component.js index 9cbfd726a..a40c8f3b4 100644 --- a/src/SearchInput/SearchInput.Component.js +++ b/src/SearchInput/SearchInput.Component.js @@ -35,11 +35,28 @@ export class SearchInputComponent extends Component { ); } + onChangeCallback() { + alert('Your custom onChange function is fired!'); + } + searchInputCode = ` this.getInputValue(term)} -/> + onEnter={term => this.getInputValue(term)} /> + + + + + + this.getInputValue(term)} /> + ************************************ Data ************************************ @@ -91,6 +108,19 @@ searchData = [ { name: 'onEnter', description: 'func - Method to execute by pressing the Enter key.' + }, + { + name: 'noSearhBtn', + description: 'bool - set to true to hide the Search button.' + }, + { + name: 'onChange', + description: + 'func - a custom implementation of onChange. If not specified, the default behavior will be applied.' + }, + { + name: 'compact', + description: 'bool - Set to true to enable compact mode.' } ]} /> @@ -102,6 +132,17 @@ searchData = [ placeholder='Enter a fruit' searchList={this.searchData} onEnter={term => this.getInputValue(term)} /> +
+ +
+ this.getInputValue(term)} /> {this.searchInputCode} diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js index c6c916036..d4234ac61 100644 --- a/src/SearchInput/SearchInput.js +++ b/src/SearchInput/SearchInput.js @@ -21,6 +21,11 @@ export class SearchInput extends Component { this.onSearchBtnHandler = this.onSearchBtnHandler.bind(this); } + style = { + borderTopRightRadius: '4px', + borderBottomRightRadius: '4px' + }; + onKeyPressHandler(event) { if (event.key === 'Enter') { this.props.onEnter(this.state.value); @@ -32,25 +37,26 @@ export class SearchInput extends Component { } onChangeHandler(event) { - if (this.state.searchList) { - let filteredResult = this.state.searchList.filter(item => - item.text.toLowerCase().startsWith(event.target.value.toLowerCase()) - ); - - this.setState({ - filteredResult: filteredResult - }); - } - - if (!this.state.isExpanded) { - this.setState({ - isExpanded: true - }); - } - this.setState({ value: event.target.value }); + if (this.props.onChange) { + this.props.onChange(); + } else { + if (this.state.searchList) { + let filteredResult = this.state.searchList.filter(item => + item.text.toLowerCase().startsWith(event.target.value.toLowerCase()) + ); + this.setState({ + filteredResult: filteredResult + }); + } + if (!this.state.isExpanded) { + this.setState({ + isExpanded: true + }); + } + } } onClickHandler() { @@ -59,7 +65,6 @@ export class SearchInput extends Component { } else { document.removeEventListener('click', this.onOutsideClickHandler, false); } - this.setState(prevState => ({ isExpanded: !prevState.isExpanded })); @@ -78,7 +83,10 @@ export class SearchInput extends Component { } onEscHandler(event) { - if ((event.keyCode === 27 && this.state.isExpanded === true) || (event.keyCode === 27 && this.state.searchExpanded === true)) { + if ( + (event.keyCode === 27 && this.state.isExpanded === true) || + (event.keyCode === 27 && this.state.searchExpanded === true) + ) { this.setState({ isExpanded: false, searchExpanded: false, @@ -107,7 +115,6 @@ export class SearchInput extends Component { } } } - componentDidMount() { document.addEventListener('keydown', this.onEscHandler, false); document.addEventListener('click', this.onOutsideClickHandler, false); @@ -118,10 +125,25 @@ export class SearchInput extends Component { } render() { - const { placeholder, inShellbar, onSearch, onEnter, searchList, className, ...rest } = this.props; + const { + placeholder, + inShellbar, + onSearch, + onEnter, + searchList, + onChange, + noSearchBtn, + compact, + className, + ...rest + } = this.props; return ( -
+
{inShellbar ? (
@@ -134,7 +156,7 @@ export class SearchInput extends Component {
+ aria-haspopup='true'> -
+ aria-haspopup='true'> +
(this.node = node)}> this.onClickHandler()} - ref={node => (this.node = node)} /> - - -
@@ -174,7 +204,7 @@ export class SearchInput extends Component { {this.state.filteredResult && (
+ aria-hidden={!this.state.isExpanded}>
@@ -302,6 +304,7 @@ exports[` create SearchInput 3`] = ` onClick={[Function]} onKeyPress={[Function]} placeholder="Enter a fruit" + style={Object {}} type="text" value="" /> @@ -310,6 +313,7 @@ exports[` create SearchInput 3`] = ` >